import { useRef, useEffect, useState } from 'react';
import styles from './index.module.scss';

/**
 * 文字超出容器宽度时的轮播效果组件
 * @param {Object} props
 * @param {string} props.text - 显示的文字内容
 * @param {number} props.width - 容器宽度，默认为90
 * @param {number} props.height - 容器高度，默认为22
 * @param {number} props.speed - 动画速度(秒)，默认为4
 * @param {boolean} props.pauseOnHover - 鼠标悬停时是否暂停，默认为true
 * @param {string} props.className - 自定义类名
 * @param {number} props.gapDistance - 两次轮播之间的间距，默认为10
 */
const ScrollingText = ({
  text,
  width = 90,
  height = 22,
  speed = 4,
  pauseOnHover = true,
  className = '',
  gapDistance = 10,
}) => {
  const containerRef = useRef(null);
  const [isOverflow, setIsOverflow] = useState(false);

  // 检测文字是否溢出
  const checkTextOverflow = () => {
    setTimeout(() => {
      if (containerRef.current) {
        const container = containerRef.current;
        const content = container.firstElementChild;

        if (content) {
          // 临时移除伪元素的影响
          const pseudoElementStyle = document.createElement('style');
          pseudoElementStyle.textContent = '.scrollingText::after { display: none !important; }';
          document.head.appendChild(pseudoElementStyle);

          // 测量原始文字宽度
          const originalDisplay = content.style.display;
          content.style.display = 'inline-block';
          const containerWidth = container.getBoundingClientRect().width;
          const contentWidth = content.getBoundingClientRect().width;

          setIsOverflow(contentWidth > containerWidth);

          // 恢复样式
          content.style.display = originalDisplay;
          document.head.removeChild(pseudoElementStyle);
        }
      }
    }, 0);
  };

  useEffect(() => {
    // 初始检测
    checkTextOverflow();
    // 添加窗口大小变化时的重新检测
    window.addEventListener('resize', checkTextOverflow);

    return () => {
      window.removeEventListener('resize', checkTextOverflow);
    };
  }, [text, width]);

  // 动态设置动画持续时间
  const animationDuration = `${speed}s`;
  // 动态设置滚动距离
  const scrollDistance = `calc(-100% + ${width}px)`;

  return (
    <div
      className={`${styles.container} ${className} ${isOverflow ? styles.hasOverflow : ''} ${
        pauseOnHover ? styles.pauseOnHover : ''
      }`}
      ref={containerRef}
      style={{
        width: `${width}px`,
        height: `${height}px`,
      }}>
      <span
        className={styles.scrollingText}
        // data-text={text}
        style={{
          animationDuration,
          '--scroll-distance': scrollDistance,
          '--animation-duration': animationDuration,
          '--gap-distance': `${gapDistance}px`,
        }}>
        {text}
      </span>
    </div>
  );
};

export default ScrollingText;
